﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../lib/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="../lib/layui.js"></script>
</head>
<body>


    <blockquote class="layui-elem-quote"> 数据表格 - 动态列</blockquote>

    <div class="layui-row">
        <div class="layui-btn" id="btn1">生成表格01</div>
        <div class="layui-btn" id="btn2">生成表格02</div>
    </div>
    <table class="layui-hide" id="test"></table>

    <pre class="layui-code" lay-title="html代码">

    </pre>





<script>

    var tmpColJson1 = [
        [
            { "field": "UserName", "title": "用户名" },
            { "field": "CellPhone", "title": "手机号" }
        ]
    ];

    var tmpDataJson1 =
    [
        { "UserName": "张三","CellPhone":"13862740967"},
        { "UserName": "张三1","CellPhone":"13862740967"}
    ];


    var tmpColJson2 = [
        [
            { "field": "UserName2", "title": "用户名1" },
            { "field": "CellPhone2", "title": "手机号1" },
            { "field": "Sex2", "title": "姓别" }
        ]
    ];

    var tmpDataJson2 =
    [
            { "UserName2": "张三", "CellPhone2": "13862740967", "Sex2": "男"},
            { "UserName2": "张三1", "CellPhone2": "13862740967", "Sex2": "女"}
    ];

    var $ = layui.$;

    $(function() {
        $("#btn1").click(function() {
            makeyDataTable("#test", tmpColJson1, tmpDataJson1);
        });

        $("#btn2").click(function () {
            makeyDataTable("#test", tmpColJson2, tmpDataJson2);
        });
    });

  

    /*
     * 生成表格
     */
    function makeyDataTable(tableId,columnJson,dataJson) {
        layui.table.render({
            'elem': tableId,
            'cols': columnJson,
            "data":dataJson
        });
    }

    layui.code({ encode: true });

    var jsonData = {
        "UserName": "张三",
        "CellPhone": "13862740967",
        "YesNO": "0"
    };



    layui.form.val("curForm", jsonData);


    //赋值完成后进行重新的渲染
    layui.form.render();

</script>
</body>
</html>